Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modern UI / Nextcloud Theme #629

Merged
merged 162 commits into from
Aug 22, 2023
Merged

Modern UI / Nextcloud Theme #629

merged 162 commits into from
Aug 22, 2023

Conversation

hampoelz
Copy link

@hampoelz hampoelz commented Nov 5, 2022

Introduction

In order to improve the experience with snappymail - especially with the snappymail app for nextcloud - I decided to create a new snappymail theme that follows the style of nextcloud and offers an integration with the nextcloud theme app to provide a seamless experience.

Already mentioned in: #96 and #569

Compromises

SnappyMail's default CSS variables for styling

I didn't use SnappyMail's variables for two reasons:

  • I've played around with these CSS variables provided by snappymail for styling, but they seemed incomplete and inconsistent.
  • Since Snappymail needed a complete theme overhaul anyway, I redesigned each element individually.

So it was cleaner for me not to use the snappymail variables.

Suggestions/Discussion

placeholder for blocked images

Currently there are some issues with blocking images/tracking in mail - it leads to wrong layouts or even distorted images - and it just doesn't look good in the end.

My suggestion would be instead of displaying broken/not loaded images, display styleable placeholders with a width and height - like many other webmail pages (Roundcube, Protonmail, ...) do.

standalone SnappyMail theme

It would also be possible to add this theme to the "standalone" Snappymail version - color changes of the theme are possible through the variables.css-file I added. When the theme is done, it should be possible to change every single color using this file/css variables - unlike SnappyMail's current CSS variables.

(Disadvantage: These variables are then applied globally to the entire theme and are not as modular as those of snappymail, where each area (login, settings, ...) can be color-adjusted individually.)

Nextcloud backwards compatibility

I only tested the theme on Nextcloud 25, as this is the upstream version. Theoretically, the theme could also be provided for older versions.


Checklist

To give an insight into the current status of the theme, here is a checklist:

  • side panel
  • buttons
  • checkboxes
  • input & selection fields
  • message list & view
  • message flags
  • dropdown menus
  • popups
  • file picker
  • loading- & login-screen
  • responsive design
  • scrollbars
  • settings pages
  • placeholder for blocked images?
  • [something else I forgot or is incomplete?]

ℹ️ The theme is currently in test phase. Feedback is appreciated.


Conclusion

The theme isn't quite finished yet, but it's already usable. This pull request is used to provide some information about the status of the theme and to track the progress.

To have a larger discussion on any of the above topics, consider creating a separate issue as it is beyond the scope of this PR.

@the-djmaze
Copy link
Owner

Great work hampoelz!
Instead of /integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css
Could you put it in something like /integrations/nextcloud/snappymail/app/themes/Nextcloud25/styles.css

This way there's my simple CSS and your terrific advanced one.
Then you don't have to solve conflicts with my changes and we could easily put yours as default and provide the other as reference as well so that people can modify yours/mine.

@cm-schl cm-schl mentioned this pull request Nov 14, 2022
15 tasks
@the-djmaze
Copy link
Owner

Sorry, it seems i accidentally released your WIP in the Nextcloud release while i was testing your work.

I've removed it so that next release won't have it.

@hampoelz
Copy link
Author

hampoelz commented Nov 30, 2022

Ah, no problem. Let's just say it's a short public test. ;)

But you might want to take a look at Nextcloud app release automations to prevent such things.
https://docs.nextcloud.com/server/latest/developer_manual/app_publishing_maintenance/release_automation.html

@Niveshkrishna
Copy link

Great work @hampoelz this new theme looks amazing. Wondering what is pending for it be released @the-djmaze

@elhananjair
Copy link

@hampoelz How can we install this theme for a test?

@hampoelz
Copy link
Author

@elhananjair You need to perform the following steps to install the theme:

First download the files styles.css and images/preview.png from this pull request.

Then create a folder named "NextcloudV25+" inside your_nextcloud_root/custom_apps/snappymail/app/themes/ if you're using Nextcloud, or your_snappymail_root/snappymail/v/x.x.x/themes/ if you're using the standalone SnappyMail version.

Finally, copy the previously downloaded files to .../NextcloudV25+/styles.css and .../NextcloudV25+/images/preview.png.

Since the theme isn't officially included yet, you need to reinstall it after each SnappyMail update.

Note: Depending on your Nextcloud installation, SnappyMail may be installed in the apps folder instead of custom_apps.

@elhananjair
Copy link

Thank you very much, I like it a lot and it seems complete, here are some little comments I have on it on my first use:

Text-overflow
image

HTML Rendered differently
image

New tags do not have color assigned
image

@hampoelz
Copy link
Author

@elhananjair Thank you very much for your report.

  • The text overflow issue in the sidebar menu items should be fixed now.
  • The issue with the HTML rendering shouldn't be related to the theme.
  • I didn't set a color for custom tags, since they don't actually have one. But you're right, this isn't optimal. The custom tags in the dropdown are now marked with the same gray color as in the list of assigned message tags.

@hampoelz hampoelz changed the title [WIP] Modern UI / Nextcloud Theme Modern UI / Nextcloud Theme Jul 27, 2023
@elhananjair
Copy link

Hello @hampoelz
I wanted to suggest this change if you could add more contrast to the layout, I tried this take a look and comment...

  1. Search input should not have a check box I guess
  2. The top tools are not well contrasted with the component listing emails and the content on the right (In my opinion). This will help us to focus on a new email list and easily apply the top options.

image

@hampoelz
Copy link
Author

hampoelz commented Aug 3, 2023

Hey @elhananjair,

The checkbox next to the search bar is for selecting all mails at once and is provided by SnappyMail, not by the theme.

I don't want to change the contrast much as it wouldn't match the rest of the Nextcloud theming. Also, I don't think it's a good idea to separate the search more from the list. However, after some fiddling around, I came up with the following style, which would at least contrast the top tools slightly:

Screenshot from 2023-08-03 20-51-01

@elhananjair
Copy link

Hello @hampoelz

I liked the style you applied to the top tools, which, I think is enough for slight contrast between the top tools and other components.

@cm-schl
Copy link

cm-schl commented Aug 4, 2023

@the-djmaze the work of @hampoelz looks very good, would you add something or could this PR be merged? 🙂

@johnnyq
Copy link

johnnyq commented Aug 12, 2023

Yup I think its ready for the merge as well

@the-djmaze the-djmaze merged commit 64bb993 into the-djmaze:master Aug 22, 2023
@elhananjair
Copy link

I hope this theme will be the default theme for Snappymail.

@cm-schl
Copy link

cm-schl commented Aug 22, 2023

Thanks again @hampoelz for your great work 🙂🥳

@eibex
Copy link

eibex commented Oct 2, 2023

Is it possible to use this without the Nextcloud app? I run snappymail on a separate domain but it can also be accessed via an iframe on nextcloud. For now I created a custom theme by copying your styles.css (great work btw), but it would be great if it was available as a "normal" theme.

@hampoelz
Copy link
Author

hampoelz commented Oct 6, 2023

The theme is not dependent on Nextcloud. So it would be theoretically possible.

It even contains styles for some elements that are not shown in the Nextcloud version of SnappyMail, like the login screen.

@jdaviescoates
Copy link

jdaviescoates commented Oct 6, 2023

I'm not sure this is really the best place to ask/ suggest this, but on larger screens I think I'd prefer the top tools to be left aligned instead of centred. Is that possible? (possibly even already possibly someone in a setting?)

Screenshot from 2023-10-06 14-08-21

@the-djmaze
Copy link
Owner

The theme is not dependent on Nextcloud. So it would be theoretically possible.

Then i will move it from https://github.com/the-djmaze/snappymail/tree/master/integrations/nextcloud/snappymail/app/themes/NextcloudV25%2B to https://github.com/the-djmaze/snappymail/tree/master/snappymail/v/0.0.0/themes

@hampoelz
Copy link
Author

I will take this into consideration @jdaviescoates. But this may take a few weeks as I want to wait for feedback / issues before creating a PR with fixes and improvements for the theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants